<script setup lang="ts">
import type { BasicInfo } from '../type'
import BlockHead from './block-head.vue'

import img1 from './item-four-icon-1.png'
import img2 from './item-four-icon-2.png'

import ItemFourItem from './item-four-item.vue'

defineOptions({
  name: 'ItemFour',
})

defineProps<{
  data: BasicInfo
}>()
</script>

<template>
  <div class="w-full flex flex-auto flex-col">
    <BlockHead title="本年销售数据看板" />
    <div class="block-body h-70 w-full flex flex-auto flex-col justify-around overflow-auto py-4">
      <ItemFourItem class="w-1/2" :img="img1" title="订单量（个）" :value="data.orderOutNum" :ratio="data.orderOutYoyNum" />
      <ItemFourItem class="w-1/2" :img="img2" title="销售额（元）" :value="data.orderOutAmount" :ratio="data.orderOutYoyAmount" />
    </div>
  </div>
</template>
